<template>
  <div>
    <div class="info-box">
      <div class="me">
        <div class="avatar-box">
          <van-image round width="6rem" height="6rem" :src="user.avatar" />
        </div>
        <div class="nickname-box">
          <div>
            {{ user.nickname }}
          </div>
        </div>
      </div>

      <div class="course-box">
        <i-panel title="已购课程">
          <div v-for="(item, index) in courseList" :key="index" class="item">
            <div class="card-box" @click="getDetail(item.id)">
              <van-card
                :price="item.price"
                :tag="item.subjectTitle"
                :desc="item.description"
                :title="item.title"
                :thumb="item.cover"
                origin-price="999"
                lazy-load="true"
              />
            </div>
          </div>
        </i-panel>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  data() {
    return {
      courseList: [],
      user: {},
    };
  },

  onTabItemTap(item) {
    this.getInfo();
    this.getCourseList();
  },

  methods: {
    async getInfo() {
      let id = wx.getStorageSync("id");
      let response = await request({
        url: `/user_service/getUserInfo/${id}`,
        method: "GET",
      });

      this.user = response.data.user;
    },

    async getCourseList() {
      let id = wx.getStorageSync("id");
      let response = await request({
        url: `/order_service/getUserOrder/${id}`,
        method: "GET",
      });

      let list = response.data.list;
      let courseIds = [];
      for (let i = 0; i < list.length; i++) {
        console.log(list[i]);
        courseIds.push(list[i].courseId);
      }

      console.log(courseIds);

      let response2 = await request({
        url: `/course_service/course/getCourseInfoByIds`,
        method: "POST",
        data: courseIds,
      });

      this.courseList = response2.data.list;
    },

    async getDetail(id) {
      wx.navigateTo({
        url: `/pages/video/detail/main?id=${id}`,
      });
    },
  },
};
</script>

<style>
.avatar-box {
  margin: 20rpx;
  padding: 5rpx;
  float: left;
  border-radius: 120rpx;
  box-shadow: 18rpx 18rpx 30rpx #d1d9e6, -18rpx -18rpx 30rpx #fff;
}

.nickname-box {
  float: left;
  text-align: center;
  width: 55%;
  border-radius: 30rpx;
  box-shadow: 18rpx 18rpx 30rpx #d1d9e6, -18rpx -18rpx 30rpx #fff;
  margin-top: 70rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  font-size: 40rpx;
}

.card-box {
  border-radius: 60rpx;
  box-shadow: 18rpx 18rpx 30rpx #d1d9e6, -18rpx -18rpx 30rpx #fff;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.me{
  padding-bottom: 10%;
}
.course-box {
  float: inline-end;
  width: 100%;
}
.item {
  margin-left: 5%;
  margin-right: 5%;
}
</style>
